<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/bootstrap_3.3.7_min.css">
    <link rel="stylesheet" href="../bootstrap/bootstrap-datetimepicker_4.17.47.css">
    <script src="../js/jquery_2.1.1.js"></script>
    <script src="../js/bootstrap_3.3.7_js.js"></script>
    <script src="../bootstrap/moment.js_2.24.0.js"></script>
    <script src="../bootstrap/bootstrap-datetimepicker_4.17.47_js.min.js"></script>
    <script src="../layui/layer/layer.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
</head>
<body>
<div style="margin-left:20%;margin-right: 20%;" id="property">
    <h4 class="font-weight-bold text-primary">考试/作业名称:</h4>
    <input type="text" class="form-control" v-model="paperName">
    <h4 class="font-weight-bold text-primary">出题人:</h4>
    <input type="text" class="form-control" v-model="paperFounder">
    <h4 class="font-weight-bold text-primary">考试时间 :</h4>
    <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control" v-model="paperDate" placeholder="出题时间"/>
        <span class="input-group-addon">
            <span class="glyphicon">日期</span>
        </span>
    </div>

    <h4 class="font-weight-bold text-primary">科目:</h4>
    <select class="form-control" v-model="paperSubject">
        <option value="1">语文</option>
        <option value="2">数学</option>
        <option value="3">英语</option>
        <option value="4">物理</option>
        <option value="5">化学</option>
        <option value="6">生物</option>
        <option value="7">政治</option>
        <option value="8">历史</option>
        <option value="9">地理</option>
    </select>
    <h4 class="font-weight-bold text-primary">试卷类型:</h4>
    <select class="form-control" v-model="paperType">
        <option value="1">当日作业</option>
        <option value="2">周末作业</option>
        <option value="3">寒暑假作业</option>
        <option value="4">月考</option>
        <option value="5">期中考</option>
        <option value="6">期末考</option>
    </select>
    <h4 class="font-weight-bold text-primary">考试时长:</h4>
    <input type="text" class="form-control" v-model="paperDuration">
    <button type="button" class="btn btn-primary"
            style="float: right; margin-right: 10%;margin-top: 10%;"
            data-dismiss="modal" @click="insertTest()">确认
    </button>
</div>

<script>
    var paper = new Vue({
        el: '#property',
        data: {
            paperName: '',
            paperFounder: '',
            paperDate: '',
            paperSubject: '',
            paperType: '',
            paperDuration: '',
        },
        methods: {
            insertTest: function () {
                var testPaper = {
                    paperName: this.paperName,
                    paperFounder: this.paperFounder,
                    paperDate: this.paperDate,
                    paperSubject: this.paperSubject,
                    paperType: this.paperType,
                    paperDuration: this.paperDuration,
                };
                console.log(testPaper);
                axios.post("../operatePaper/generatePaper",
                    testPaper
                ).then(function (result) {
                    console.log(result.data);
                    window.location.href = "generatePaper.html?paperId=" + result.data;
                }).catch(function (error) {
                    console.log(error);
                })
            }
        }
    });
    //日期格式化
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
    });
</script>
</body>
</html>